<template>
			<view class="slide-com">
					<view class="title-box" id="slideBtn" ref="slideBtn" @click="slideFun" :style="'background: ' + background">
							<view class="title">
									{{title}}
							</view>
							<view class="icon iconfont icon-xiajiantou" v-if="!islider">
									
							</view>
							<view class="icon iconfont icon-shangjiantou" v-if="islider">
									
							</view> 
					</view>
					
					<view class="slide-list" :style="'top: ' + topCopy">
							<view class="slide-item" v-for="(item,index) in itemLists" :key="index" @click="itemFun(index)">
									<view class="leftText1"> 
											{{item.leftText1}}
									</view>
									<view class="check iconfont icon-duihao" v-if="item.check">
											
									</view>
							</view>
					</view>
					
					<view class="back-box" :style="'top: ' + topCopy + ';' + backBottom" @click="backFun">
							
					</view>
			</view>
</template>

<script setup>
	import { ref } from "vue"
	const props = defineProps({
		transitionTop: {
			type: String,
			default: "-1000rpx"
		},
		top: {
			type: String
		},
		title: {
			type: String
		},
		itemLists: {
			type: Array
		},
		callback: {
			type: Function
		},
		checkType: {
			type: String
		},
		background: {
			type: String
		}
	});
	
	const emit = defineEmits(['change-title','change-lists'])
	
	const islider = ref(false);
	const topCopy = ref(props.transitionTop);
	const backBottom = ref("");
	const titleCopy = ref(props.title);
	
	const slideFun = () => {
	
		if(!islider.value){
			topCopy.value = props.top;
			backBottom.value = "bottom: 0;"
		}else{
			topCopy.value = props.transitionTop;
			backBottom.value = ""
		}
		
		islider.value = !islider.value;
	}
	
	const itemFun = (index) => {
		let itemLists = JSON.parse(JSON.stringify(props.itemLists));
		let check = itemLists[index].check;
		
			if(props.checkType == "radio"){
				
				itemLists.forEach((v,i,arr)=>{
					if(i == index){
						v.check = !v.check;
						if(v.check){
							emit('change-title', v.leftText1);
							topCopy.value = props.transitionTop;
						}else{
							emit('change-title', titleCopy.value);
							topCopy.value = props.transitionTop;
						}
						
						islider.value = false;
						backBottom.value = "";
						
					}else{
						v.check = false;
					}
				});
				
			}

		emit('change-lists', itemLists);
		
	}
	
	const backFun = () => {
		islider.value = false;
		topCopy.value = transitionTop.value;
		backBottom.value = "";
	}
	
</script>

<style lang="scss">
		.slide-com{
			position: relative;
			margin-right: 20rpx;
			
			.title-box{
				padding: 0 20rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #f8f8f8;
				border-radius: 8rpx;
				
				.title{
					color: #333;
					margin-right: 10rpx;
					font-size: 24rpx;
				}
				
				.icon{
					color: #333;
					font-size: 16rpx;
				}
			}
			
			.back-box{
				position: fixed;
				left: 0;
				right: 0;
				z-index: 999;  
			}
			
			.slide-list{
				position: fixed;
				left: 0;
				right: 0;
				padding: 0 30rpx 30rpx 30rpx;
				transition: all 0.8s;
				background-color: #fff;
				z-index: 9999;
				
				.slide-item{
					padding: 20rpx;
					height: 50rpx;
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.leftText1{
						color: #777777;
					}
					
					.check{
						font-size: 40rpx;
						color: var(--mainColor);
					}
				}
				
			}
		}
</style>
